<template>
  <div class="home_logo">
    <a href="javascript:;" class="maoyan_logo">
      <span class="iconfont icon-maoyan"></span>
      <span class="logo_text">猫眼</span>
    </a>
    <a href="javascript:;" class="news_text">发现最新最热电影</a>
    <a href="javascript:;" class="open_app">
      打开App
      <span class="iconfont icon-iconright"></span>
    </a>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style lang="less" scoped>
@import "../../assets/css/commons.less";
.home_logo {
  position: relative;
  width: 100%;
  height: 60px;
  line-height: 60px;
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #e6e6e6;

  .maoyan_logo {
    color: @theme-color;
    display: inline-block;
    width: 95px;
    height: 40px;
    margin-left: 16px;
    .icon-maoyan {
      font-size: 28px;
      vertical-align: middle;
    }
    .logo_text {
      margin-left: 8px;
      font-size: 24px;
      vertical-align: middle;
    }
  }

  .news_text {
    margin-left: 42px;
    font-size: @fontSize_14;
    color: #666;
    font-weight: 700;
  }

  .open_app {
    margin-left: 10px;
    margin-right: 10px;
    font-size: @fontSize_16;
    font-weight: 700;
    color: #b37e7e;

    .icon-iconright {
      font-size: @fontSize_14;
    }
  }
}
</style>
